<template>
  <section class="business-section">
    <h2 class="title">热门业务</h2>
    <div class="cards">
      <!-- 遍历 responseData 数组 -->
      <div class="card" v-for="(item, index) in responseData" :key="index">
        <img :src="BASE_URL + item.serviceHeadImg" alt="服务图片">
        <div :style="{ display: 'none' }">{{ console.log(BASE_URL + item.serviceHeadImg) }}</div>
        <!-- 默认图片或动态绑定图片 -->
        <h3>{{ item.serviceMainName }}</h3>
        <p>{{ item.serviceScope }}</p>
        <div class="card-actions">
          <p>￥{{ item.serviceMoney }}起</p>
          <button class="btn-book" @click="bookNow">立刻预定</button>
        </div>
      </div>
    </div>
  </section>
</template>


<style scoped>.business-section {
  padding: 60px 20px;
  background-color: #FFF2E2;
  text-align: center;
}
.btn-book {
  display: inline-block;
  margin-top: 15px;
  padding: 10px 15px;
  max-width: 150px;    /* 最大宽度限制 */
  white-space: nowrap;  /* 防止文字换行 */
  overflow: hidden;     /* 超出隐藏（可选） */
  text-overflow: ellipsis; /* 超出显示省略号（可选） */
  background-color: #1abc9c;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-book:hover {
  background-color: #16a085;
  transform: scale(1.03);
}
p{
  text-align: left;
}
h3{
  text-align: left;
}
.title{
  text-align: left;
  border-left: 20px solid #1abc9c;
  margin-left: 300px;
}
.cards {

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  margin-top: 50px;
}

.card {
  background-color:#C7EDCC;

  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
}
</style>
<style scoped>.card-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}
img{
  width: 200px;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.card-actions button {
  flex: 1;
  padding: 6px 8px;
  border: none;
  background-color: #1abc9c;
  color: white;
  border-radius: 4px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.card-actions button:hover {
  background-color: #16a085;
}
.card-actions a {
  text-decoration: none;
  color: #1abc9c;
  margin: 0 5px;
  font-size: 0.85rem;
  transition: color 0.3s ease;
}

.card-actions a:hover {
  color: #16a085;
}
</style>
<script>
import {BASE_URL} from "@/util/Config.js";
export default {

  data() {
    return {
      BASE_URL,
      responseData: [] // 用于存储从后端返回的数据
    };
  },
  methods: {
    async sendData() {
      const data = {
        "serviceNumber": 6
      };

      try {
        const response = await fetch(BASE_URL+'/hotServices', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(data)
        });

        if (!response.ok) {
          throw new Error('Network response was not ok ' + response.statusText);
        }

        const responseData = await response.json();
        this.responseData = responseData.data; // 更新组件的 data 属性
        console.log(responseData);
        // 处理响应数据
      } catch (error) {
        console.error('There was an error!', error);
      }
    }
  },
  mounted() {
    this.sendData();
  }
}
</script>